<template>
  <div style="width: 600px;height:400px;" id="myCharts">hhha</div>
</template>

<script>
import echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";

export default {
  name: "LiquidFill",
  mounted() {
    console.log(this.$el, "ewq");

    var option = {
      series: [
        {
          type: "liquidFill",
          data: [ // 数量表示波浪数
            {
              name: "First Data",
              value: 0.6
            },
            0.5,
            0.4,
            0.3
          ],
          itemStyle: {
            shadowBlur: 0 // 取消水波阴影
          },
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  //填充区渐变色
                  offset: 0,
                  color: "#156acf"
                },
                {
                  offset: 1,
                  color: "#ffffff"
                }
              ]
            }
          ],
          backgroundStyle: {
            color: "transparent",
          }
        }
      ]
    };
    // 注意，option在setOption中设置
    this.chart = echarts.init(this.$el);
    this.chart.setOption(option);
    console.log(this.chart);
  }
};
</script>
